<template>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>注册</span>
        </div>

        <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
                <el-input
                    type="password"
                    v-model="ruleForm.pwd"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirm">
                <el-input
                    type="password"
                    v-model="ruleForm.confirm"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
           
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')"
                    >提交</el-button
                >
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
import {usernameExist,reg} from '../services/user';
export default {
    data() {
        const validateUsername = async(rule, value, callback) => {
            let data = await usernameExist(value);
            if(data.status == 0){
                callback(new Error("重名"));
            }else{
                callback();
            }
        }
        var validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else {
                if (this.ruleForm.confirm !== "") {
                    this.$refs.ruleForm.validateField("confirm");
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.ruleForm.pwd) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                username: "",
                pwd: "",
                confirm: "",
            },
            rules: {
                username: [
                     { required: true, message: '用户名不能为空', trigger: 'blur' },
                    { pattern:/^\w{6,20}$/, message: '用户名格式不正确', trigger: 'blur' },
                     { validator:validateUsername, trigger: 'blur' },
                ],
                pwd: [{ validator: validatePass, trigger: "blur" }],
                confirm: [{ validator: validatePass2, trigger: "blur" }],
            },
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    await reg({username:this.ruleForm.username,pwd:this.ruleForm.pwd});
                    this.$router.push("/login");
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
};
</script>

<style>
.box-card{
    width:500px;
    margin:auto;
}
</style>